import React, { lazy } from "react";
import Top from "@/views/Layout/Top";
import Login from "@/views/Login";
import SkeletonLoading from "@/views/SkeletonLoading";
import { Navigate } from "react-router-dom";
import { routesType } from "@/types/route";
import ActiveDetail2 from "@/views/Home/ActiveDetail2";

const History = lazy(() => import("@/views/History"));
const Detail = lazy(() => import("@/views/Detail"));
const Home = lazy(() => import("@/views/Home"));
const UserInfo = lazy(() => import("@/views/UserInfo"));
const ActiveDetail = lazy(() => import("@/views/Home/ActiveDetail"));

const withLoadingComponent = (Comp: JSX.Element) => (
  <React.Suspense fallback={<SkeletonLoading />}>{Comp}</React.Suspense>
);
const routes: routesType[] = [
  {
    path: "/",
    element: <Navigate to="/home" />,
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/",
    element: <Top />,
    exact: true,
    name: "menuRoutes",
    children: [
      {
        path: "/home",
        element: withLoadingComponent(<Home />),
      },
      {
        path: "/activeDetail",
        element: withLoadingComponent(<ActiveDetail />),
        meta: {
          title: "活动详情",
        },
      },
      {
        path: "/activeDetail2",
        element: withLoadingComponent(<ActiveDetail2 />),
        meta: {
          title: "活动详情2",
        },
      },
      {
        path: "/history",
        element: withLoadingComponent(<History />),
        meta: {
          title: "历史明细",
        },
      },
      {
        path: "/detail",
        element: withLoadingComponent(<Detail />),
        meta: {
          title: "历史明细",
        },
      },
      {
        path: "/userInfo",
        element: withLoadingComponent(<UserInfo />),
        meta: {
          title: "个人信息",
        },
      },
    ],
  },
];

export default routes;
